import React from "react";
import { View, StatusBar, ScrollView } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Link } from "expo-router";
import {
  ArrowLeft,
  Smartphone,
  Monitor,
  PlusCircle,
  Bell,
  CheckSquare,
} from "lucide-react-native";
import { ThemeToggle } from "~/components/ThemeToggle";
import { Button } from "~/components/ui/button";
import { Text } from "~/components/ui/text";

const SettingsScreen = () => {
  const devices = [
    {
      name: "HWALN",
      description: "This phone",
      bgColor: "bg-purple-600",
    },
    {
      name: "OP5A29L1",
      description: "Your phone",
      bgColor: "bg-purple-600",
    },
    {
      name: "Sterne的iPhone se",
      description: "Your phone",
      bgColor: "bg-purple-600",
    },
  ];

  return (
    <SafeAreaView className="flex-1 bg-gray-50">
      <StatusBar barStyle="dark-content" backgroundColor="#f9fafb" />
      
      {/* Header */}
      <View className="flex-row items-center justify-between px-4 py-3">
        <Link href="/" asChild>
          <Button variant="ghost" size="icon">
            <ArrowLeft size={24} color="#333" />
          </Button>
        </Link>
        <Text className="text-xl font-semibold text-gray-900">Settings</Text>
        <ThemeToggle />
      </View>

      <ScrollView className="flex-1">
        {/* User Profile */}
        <View className="px-4 py-6">
          <View className="flex-row items-center">
            <View className="w-16 h-16 bg-purple-600 rounded-full items-center justify-center mr-4">
              <Text className="text-white text-2xl font-bold">SL</Text>
            </View>
            <View>
              <Text className="text-xl font-semibold text-gray-900">Sterne Lee</Text>
              <Text className="text-gray-500">sternelee@163.com</Text>
            </View>
          </View>
        </View>

        {/* Divider */}
        <View className="h-px bg-gray-200 mx-4 mb-6" />

        {/* Your devices section */}
        <View className="px-4 mb-6">
          <Text className="text-gray-500 text-base font-medium mb-4">Your devices</Text>
          
          <View className="space-y-4">
            {devices.map((device, index) => (
              <Button
                key={index}
                variant="ghost"
                className="flex-row items-center py-2 h-auto justify-start bg-transparent w-full"
              >
                <View className={`w-14 h-14 ${device.bgColor} rounded-full items-center justify-center mr-4`}>
                  <Smartphone size={28} color="#fff" />
                </View>
                <View className="flex-1 items-start">
                  <Text className="text-lg font-semibold text-gray-900">
                    {device.name}
                  </Text>
                  <Text className="text-gray-500">{device.description}</Text>
                </View>
              </Button>
            ))}
            
            {/* Add device option */}
            <Button
              variant="ghost"
              className="flex-row items-center py-2 h-auto justify-start bg-transparent w-full"
            >
              <View className="w-14 h-14 bg-purple-300 rounded-full items-center justify-center mr-4">
                <Monitor size={24} color="#fff" />
                <View className="absolute bottom-0 right-0 w-6 h-6 bg-purple-600 rounded-full items-center justify-center">
                  <PlusCircle size={14} color="#fff" />
                </View>
              </View>
              <View className="flex-1 items-start">
                <Text className="text-lg font-semibold text-gray-900">
                  Set up another device
                </Text>
              </View>
            </Button>
          </View>
        </View>

        {/* Settings options */}
        <View className="px-4 space-y-6">
          <Button 
            variant="ghost"
            className="flex-row items-center py-2 h-auto justify-start bg-transparent w-full"
          >
            <View className="w-12 h-12 bg-purple-600 rounded-full items-center justify-center mr-4">
              <Bell size={24} color="#fff" />
            </View>
            <View className="flex-1 items-start">
              <Text className="text-lg font-semibold text-gray-900">Notifications</Text>
              <Text className="text-gray-500">On</Text>
            </View>
          </Button>

          <Button 
            variant="ghost"
            className="flex-row items-center py-2 h-auto justify-start bg-transparent w-full"
          >
            <View className="w-12 h-12 bg-purple-600 rounded-full items-center justify-center mr-4">
              <CheckSquare size={24} color="#fff" />
            </View>
            <View className="flex-1 items-start">
              <Text className="text-lg font-semibold text-gray-900">Auto-accept</Text>
              <Text className="text-gray-500">From my devices</Text>
            </View>
          </Button>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default SettingsScreen;